<template>
  <div class="order_track">
    <el-form :inline="true" :model="searchForm" size="mini" style="margin-left: 10px">
      <el-form-item label="客户">
        <el-input v-model="searchForm.customerName" placeholder="请输入客户名"></el-input>
      </el-form-item>
      <el-form-item label="订单状态">
        <el-select v-model="searchForm.status">
          <el-option label="未确认" :value="STATUS.SERVE_WAIT"></el-option>
          <el-option label="服务中" :value="STATUS.SERVING"></el-option>
          <el-option label="已完成" :value="STATUS.SERVED"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="订单创建日期">
        <el-date-picker
          v-model="searchForm.createTime"
          value-format="yyyy-MM-dd"
          type="daterange"
          align="right"
          unlink-panels
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
        ></el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="search()">查询</el-button>
      </el-form-item>
      <el-form-item>
        <el-button
          type="primary"
          size="mini"
          icon="fa fa-file-excel-o"
          @click="exportExcel()"
        >&nbsp;导出到EXCEL</el-button>
      </el-form-item>
    </el-form>
    <el-table size="mini" :data="orderList" :height="getTableHeight(200)">
      <el-table-column type="expand">
        <template slot-scope="props">
          <div class="expand-row">
            <div class="info-block">
              <div class="title">订单基本信息</div>
              <div class="content">
                <el-row>
                  <el-col :span="6">
                    <div class="item">
                      <div class="label">订单号</div>
                      <div>{{props.row.orderId}}</div>
                    </div>
                  </el-col>
                 
                  <el-col :span="6">
                    <div class="item">
                      <div class="label">产品</div>
                      <div>{{props.row.prodName}}</div>
                    </div>
                  </el-col>
                  <el-col :span="6">
                    <div class="item">
                      <div class="label">创建时间</div>
                      <div>{{props.row.orderDate}}</div>
                    </div>
                  </el-col>
                </el-row>
                <el-row>
                  <el-col :span="6">
                    <div class="item">
                      <div class="label">客户</div>
                      <div>{{props.row.customerName+'-'+props.row.customerTel}}</div>
                    </div>
                  </el-col>
                   <el-col :span="6">
                    <div class="item">
                      <div class="label">业务员</div>
                      <div>{{props.row.empName+'-'+props.row.empTel}}</div>
                    </div>
                  </el-col>
                  <el-col :span="6">
                    <div class="item">
                      <div class="label">价格</div>
                      <div>{{props.row.pricePay?props.row.pricePay+'元':'暂无'}}</div>
                    </div>
                  </el-col>
                </el-row>
              </div>
            </div>
            <div class="info-block" v-if="props.row.orderTaskItems">
              <div class="title">订单服务跟踪</div>
              <div class="content">
                <el-row v-for="task in props.row.orderTaskItems">
                  <el-col :span="16">
                    <div class="item">
                      <div class="label" style="width: 100px">{{task.name}}</div>
                      <div style="flex: 1">{{task.remark?task.remark:'暂无'}}</div>
                    </div>
                  </el-col>
                </el-row>
              </div>
            </div>
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="orderId" width="170" label="订单号"></el-table-column>
      <el-table-column prop="customerName" width="80" label="客户"></el-table-column>
      <el-table-column label="业务员">
        <template slot-scope="scope">{{scope.row.empName?scope.row.empName:'暂无'}}</template>
      </el-table-column>
      <el-table-column prop="prodName" width="350" label="产品"></el-table-column>
      <el-table-column prop="orderDate" label="创建时间"></el-table-column>
      <el-table-column label="价格">
        <template slot-scope="scope">
          <span>{{scope.row.pricePay?scope.row.pricePay+'元':'暂无'}}</span>
        </template>
      </el-table-column>
    </el-table>
    <div class="paging-block" style="text-align: center">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="pagination.pageNum"
        :page-sizes="[15, 20, 30, 40]"
        :page-size="pagination.limit"
        layout="total, sizes, prev, pager, next, jumper"
        :total="pagination.total"
      ></el-pagination>
    </div>
  </div>
</template>
<script>
//  [SERVING, SERVE_WAIT, SERVED] [CHECKING, CHECKED] [DONE DISCARD AVAILABLE]
import orderMixin from "./order_mixin";
import ajax from "@/api/ajax";
const STATUS = {
  SERVING: "SERVING",
  SERVE_WAIT: "SERVE_WAIT",
  SERVED: "SERVED"
};
export default {
  name: "order-track",
  mixins: [orderMixin],
  data() {
    return {
      STATUS,
      searchForm: {
        customerPhone: "",
        createTime: [],
        status: STATUS.SERVING
      }
    };
  },
  methods: {
    search() {
      let params = Object.assign({}, this.pagination, this.searchForm);
      this.searchOrder(params).then(result => {
        console.log(result);
      });
    }
  },
  created() {
    this.search();
  }
};
</script>
<style>
.expand-row {
  border: 1px solid #f5f7fa;
  border-left: none;
  border-right: none;
  margin: -15px -50px;
  padding: 15px;
  font-size: 13px;
}

.expand-row .info-block {
  display: flex;
}

.expand-row .info-block .title {
  width: 150px;
  font-weight: bold;
  color: #909399;
  font-size: 15px;
}

.expand-row .info-block .content {
  flex: 1;
  margin: 30px 0 20px 0;
}

.expand-row .item {
  width: 100%;
  display: flex;
  margin: 5px;
  padding-right: 15px;
}

.expand-row .item .label {
  width: 60px;
}

.expand-row .item .label:after {
  content: ":";
  display: inline-block;
  margin-left: 2px;
}

.el-step__title {
  font-size: 12px;
}
</style>

